<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
body{margin:0;}
span{display:inline-block;vertical-align:middle}
.box{height:200px;border:10px solid #000;text-align:center}
.span1{width:100px;height:200px;background:red;}
.span2{width:100px;height:200px;background:blue;}
.span3{width:200px;height:100px;background:yellow;}
/* 
    IE6下默认三者底部对齐，更高版本则默认顶部对齐
	  调整对齐方式为vertical-align:top/middle/bottom时，需要每一个span都设置
	  vertical-align的第二个作用：可以清理img标签下磨人的几个px的空隙
*/
</style>
</head>
<div class="box">
  <span class="span1">1</span>
  <span class="span2">2</span>
  <span class="span3">3</span>
</div>
<body>
</body>
</html>
